<template>
  <div>
    <el-upload
      v-bind="{...item}"
      :disabled="uploading"
      :action="item.action"
      :before-upload="beforeUpload"
      :file-list="changeValue"
      :on-exceed="handleExceed"
      :on-success="uploadSuccess"
      :on-progress="handleProgress"
      list-type="picture-card"
      :http-request="httpRequest"
    >
      <div slot="default" v-loading="uploading">
        <i class="el-icon-plus" />
      </div>

      <div slot="file" slot-scope="{ file }">
        <el-image
          :preview-src-list="[file.url]"
          :src="file.url"
          class="el-upload-list__item-thumbnail"
        />
        <div class="actions">
          <span
            v-if="!inputDisabled()"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script>
import mixin from "../mixin"
import uploadMixin from "../uploadMixin"
import _ from "lodash"
import {jsonSimpleClone} from "../../../utils"
import axios from 'axios'

export default {
  name: "TImageUpload",
  mixins: [mixin, uploadMixin],
  inject: {
    elForm: {
      default: ""
    }
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      uploading: false,
      fileList: []
    }
  },
  created() {
    console.log(this.item)
  },
  methods: {
    // 上传成功
    httpRequest(item) {
      console.log(item)
      const formData = new FormData()
      formData.append('file', item.file)
      axios({
        method: 'post',
        url: item.action,
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() },
        onUploadProgress: (evt) => { //原生获取上传进度的事件
          const percent = evt.loaded/evt.total*100
          item.onProgress({status: 'uploading', percentage: percent})
        }
      }).then( (res)  => {
        const {data} = res
        this.changeValue.push({
          name: item.file.name,
          url: data.data
        })
        item.onSuccess()
      }).catch(() => {
        item.onError()
      })
    },
    uploadSuccess(response, file, fileList) {
      this.uploading = false
      // let oldFileList = jsonSimpleClone(this.changeValue)
      // if (!oldFileList) {
      //   oldFileList = []
      // }
      // oldFileList.push({
      //   name: file.name,
      //   url: response.data
      // })
    },
    handleProgress(event, file, fileList) {
      this.uploading = true
    },
    handleError(err, file, fileList) {
      this.uploading = false
    },
    handleExceed() {
      this.$message.error(`最多上传${this.item.limit}个文件`)
    },
    handleRemove(file) {
      console.log(file)
      let tempList = jsonSimpleClone(this.changeValue)
      _.remove(tempList, function (item) {
        return item.url === file.url
      })
      console.log(tempList)
      this.changeValue = tempList
    },
    inputDisabled() {
      // bin: 修复不受 elForm 控制禁用
      return this.item.disabled || (this.elForm || {}).disabled
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload-list__item {
  position: relative;
}

.actions {
  position: absolute;
  height: 24px;
  width: 100%;
  bottom: 8px;

  .el-upload-list__item-delete {
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    color: white;
    background-color: rgba(0,0,0,.6);
    padding: 0 5px;
    border-radius: 6px 0 0 0;
    right: 0;
  }
}

// 避免上传文件后出现抖动
::v-deep .el-upload-list__item.is-ready,
::v-deep .el-upload-list__item.is-uploading {
  display: none !important;
}
</style>
